<template>
  <div class="log-page f-c">
    <el-form inline>
      <el-form-item label="物候期">
        <el-input v-model="searchParams.growthPeriodName" clearable placeholder="" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="margin-left: 15px" @click="onSearch">搜索</el-button>
        <el-button type="primary" style="margin-left: 15px" @click="onReset">清除</el-button>
      </el-form-item>
    </el-form>
    <div class="line" />
    <div class="button-list2 f-r a-c" style="margin-bottom: 20px;">
      <el-button plain type="primary" @click="onAdd">添加</el-button>
    </div>
    <div class="table-box">
      <el-table
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        height="100%"
        stripe
        :data="tableData"
        @selection-change="onSelect"
      >
        <el-table-column prop="growthPeriodName" label="物候期" align="left" />
        <el-table-column prop="growthPeriodDay" label="距播种天数" align="left" />
        <el-table-column label="操作" fixed="right" width="80px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="onDelete(scope.row)"
            > 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
    <el-dialog
      title="添加/编辑"
      :visible.sync="dialogVisible"
      width="540px"
    >
      <el-form ref="formRef" inline :model="ruleForm" :rules="rules">
        <el-form-item label="作物">
          <el-select v-model="ruleForm.cropId" clearable placeholder="">
            <el-option v-for="item in options" :value="item.typeName" :label="item.typeName" />
          </el-select>
        </el-form-item>
        <template v-for="(item,index) in ruleForm.list" class="f-r a-c">
          <el-form-item :key="'item.' + index + '.key'" label="物候期" :prop="'item.' + index + '.growthPeriodName'">
            <el-input v-model="item.growthPeriodName" clearable placeholder="物候期" />
          </el-form-item>
          <el-form-item :key="'item.' + index + '.key'" label="据播种" :prop="'item.' + index + '.growthPeriodDay'">
            <el-input v-model="item.growthPeriodDay" clearable placeholder="数值输入" type="number" />
          </el-form-item>
          <el-form-item :key="'item.' + index + '.key'" label="天" />
        </template>
      </el-form>
      <div class="f-r a-c j-c add-item" @click="add">
        <i class="el-icon-plus" />
        新增
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import crud from '@/mixins/crud';
import {http_growthPeriod, http_pest} from '@/api'
export default {
  name: 'Index',
  mixins: [crud],
  data() {
    return {
      request: http_growthPeriod,
      dialogVisible: false,
      searchParams: {
        growthPeriodName: ''
      },
      tableData: [
      ],
      ruleForm: {
        cropId: '',
        list: []
      },
      formList: [
      ],
      deleteKey: 'growthId',
      options: []
    }
  },
  created() {
    // 作物
    http_pest.cropList().then(res => {
      this.options = res.data
    })
  },
  methods: {
    dialogEdit() {
      this.dialogVisible = true
    },
    add() {
      this.ruleForm.list.push({
        cropId: '',
        growthPeriodName: '',
        growthPeriodDay: ''
      })
    },
    onAdd() {
      this.formList = []
      this.dialogVisible = true
    },
    onSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          http_growthPeriod.create({
            ...this.ruleForm
          }).then(res => {
            this.$message.success(res.msg)
            this.onClose()
            this.onSearch()
          })
        }
      })
    },
    onClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.add-item {
  font-size: 16px;

  font-weight: 500;
  line-height: 26px;
  color: #1AAD19;
  text-align:center;
  cursor: pointer;
  margin-top: -10px;
}
.custom-table-body {
  .tr {
    border-bottom: 1px solid #E6E6E6;
    .td {
      width: 20%;
      height:80px;
      line-height: 80px;
      font-size: 14px;

      font-weight: 400;
      color: #333333;
    }
    .td:nth-child(2) {
      width: 40%
    }
    .td:nth-child(3) {
      flex-grow: 1;
    }

    .td:nth-child(1) {
      padding-left: 33px;
    }
    .td:nth-child(4) {
      display: flex;
      align-items:center;
      justify-content: center;
      width: 151px;
    }
  }
}
.custom-table-header {
  width: 100%;
  height: 86px;
  background: #F3F6F9;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  border: 1px solid #E6E6E6;
  padding: 11px 0;

  .tr {
    .td {
      width: 20%;
      font-size: 14px;

      font-weight: 400;
      color: #999999;
    }
    .td:nth-child(2) {
      width: 40%
    }
    .td:nth-child(3) {
      flex-grow: 1;
    }
    .td:nth-child(1) {
      padding-left: 33px;
    }
    .td:nth-child(4) {
      display: flex;
      align-items:center;
      justify-content: center;
      width: 151px;
    }
  }
  .title {
    font-size: 14px;

    font-weight: 400;
    color: #333333;
    line-height: 14px;
  }
  .type-item {
    display: inline-block;

    font-weight: 400;
    color: #1AAD23;
    line-height: 14px;
    margin-right: 4px;
    margin-left: 10px;
  }
}
</style>
